$zindex-popover: 1000
$line-height-base: 1rem
$popover-arrow-width: 4px
$popover-arrow-color: $bg-body
$popover-arrow-outer-width: $popover-arrow-width + 1px
$popover-arrow-outer-color: $border-default
$popover-distance: $popover-arrow-width + 4px

.fui-popover
  position: relative
  margin: 1px
  user-select: text
  white-space: normal
  font-size: $font-md
  line-height: $line-height-base
  z-index: $zindex-popover

  // Offset the popover to account for the popover arrow
  &-placement-top,
  &-placement-topLeft,
  &-placement-topRight
    padding-bottom: $popover-distance

  &-placement-right,
  &-placement-rightTop,
  &-placement-rightBottom
    padding-left: $popover-distance

  &-placement-bottom,
  &-placement-bottomLeft,
  &-placement-bottomRight
    padding-top: $popover-distance

  &-placement-left,
  &-placement-leftTop,
  &-placement-leftBottom
    padding-right: $popover-distance

  &-inner
    background-color: $bg-body
    background-clip: padding-box
    border-radius: 0.25rem
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2)

  // Arrow
  &-arrow
    &,
    &:after
      position: absolute
      display: block
      width: 0
      height: 0
      border-color: transparent
      border-style: solid

  &-arrow
    border-width: $popover-arrow-outer-width

  &-arrow:after
    border-width: $popover-arrow-width
    content: ""

  &-placement-top > &-content > &-arrow,
  &-placement-topLeft > &-content >  &-arrow,
  &-placement-topRight > &-content >  &-arrow
    border-bottom-width: 0
    border-top-color: $popover-arrow-outer-color
    bottom: $popover-distance - $popover-arrow-outer-width
    &:after
      content: " "
      bottom: 1px
      margin-left: -$popover-arrow-width
      border-bottom-width: 0
      border-top-color: $popover-arrow-color

  &-placement-top > &-content >  &-arrow
    left: 50%
    margin-left: -$popover-arrow-outer-width

  &-placement-topLeft > &-content >  &-arrow
    left: 16px

  &-placement-topRight > &-content >  &-arrow
    right: 16px

  &-placement-right > &-content >  &-arrow,
  &-placement-rightTop > &-content >  &-arrow,
  &-placement-rightBottom > &-content >  &-arrow
    left: $popover-distance - $popover-arrow-outer-width
    border-left-width: 0
    border-right-color: $popover-arrow-outer-color
    &:after
      content: " "
      left: 1px
      bottom: -$popover-arrow-width
      border-left-width: 0
      border-right-color: $popover-arrow-color

  &-placement-right > &-content >  &-arrow
    top: 50%
    margin-top: -$popover-arrow-outer-width

  &-placement-rightTop > &-content >  &-arrow
    top: 12px

  &-placement-rightBottom > &-content >  &-arrow
    bottom: 12px

  &-placement-bottom > &-content >  &-arrow,
  &-placement-bottomLeft > &-content >  &-arrow,
  &-placement-bottomRight > &-content >  &-arrow
    border-top-width: 0
    border-bottom-color: $popover-arrow-outer-color
    top: $popover-distance - $popover-arrow-outer-width
    &:after
      content: " "
      top: 1px
      margin-left: -$popover-arrow-width
      border-top-width: 0
      border-bottom-color: $popover-arrow-color

  &-placement-bottom > &-content >  &-arrow
    left: 50%
    margin-left: -$popover-arrow-outer-width

  &-placement-bottomLeft > &-content >  &-arrow
    left: 16px

  &-placement-bottomRight > &-content >  &-arrow
    right: 16px

  &-placement-left > &-content >  &-arrow,
  &-placement-leftTop > &-content >  &-arrow,
  &-placement-leftBottom > &-content >  &-arrow
    right: $popover-distance - $popover-arrow-outer-width
    border-right-width: 0
    border-left-color: $popover-arrow-outer-color
    &:after
      content: " "
      right: 1px
      border-right-width: 0
      border-left-color: $popover-arrow-color
      bottom: -$popover-arrow-width

  &-placement-left > &-content >  &-arrow
    top: 50%
    margin-top: -$popover-arrow-outer-width

  &-placement-leftTop > &-content >  &-arrow
    top: 12px

  &-placement-leftBottom > &-content >  &-arrow
    bottom: 12px
